/*
 * @Description:
 * @version: v0.0.1
 * @Author: ZhouYanPing
 * @Date: 2025-04-06 12:23:55
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2025-04-06 13:34:20
 */
import { useCallback, useEffect, useState } from '@lynx-js/react';
import { useNavigate } from 'react-router';
import arrow from '../assets/arrow.png';
import lynxLogo from '../assets/lynx-logo.png';
import reactLynxLogo from '../assets/react-logo.png';

export function Index() {
  const [alterLogo, setAlterLogo] = useState(false);
  const nav = useNavigate();

  useEffect(() => {
    console.info('Hello, ReactLynx');
  }, []);

  const onTap = useCallback(() => {
    'background only';
    setAlterLogo(!alterLogo);
  }, [alterLogo]);

  return (
    <view>
      <view className="Background" />
      <view className="App">
        <view className="nav-container">
          <view className="nav-item" bindtap={() => nav('/home')}>
            <text className="nav-icon">🏠</text>
            <text className="nav-text">首页</text>
          </view>
          <view className="nav-item" bindtap={() => nav('/about')}>
            <text className="nav-icon">ℹ️</text>
            <text className="nav-text">关于</text>
          </view>
          <view className="nav-item" bindtap={() => nav('/list-demo')}>
            <text className="nav-icon">📋</text>
            <text className="nav-text">列表</text>
          </view>
        </view>
        <text className="hello">hello world Lynx</text>
        <view className="Banner">
          <view className="Logo" bindtap={onTap}>
            {alterLogo ? <image src={reactLynxLogo} className="Logo--react" /> : <image src={lynxLogo} className="Logo--lynx" />}
          </view>
          <text className="Title">React Hello World</text>
          <text className="Subtitle">on Lynx</text>
        </view>
        <view className="Content">
          <image src={arrow} className="Arrow" />
          <text className="Description">Tap the logo and have fun!</text>
          <text className="Hint">
            Edit<text style={{ fontStyle: 'italic' }}>{' src/App.tsx '}</text>
            to see updates!
          </text>
        </view>
        <view style={{ flex: 1 }}></view>
      </view>
    </view>
  );
}
